<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		
		<!--
			像素：
			    -屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
			    -分辨率：1920*1080说的就是屏幕中的小点的数量
			    -在前端开发中像素要分成两种情况讨论：css像素和物理像素
			    -物理像素，上述所说的小点点就属于物理像素
			    -css像素，编写网页时，我们所用的像素都是css像素
			    	-浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现
			    	-一个css像素最终由几个物理像素显示，由浏览器决定：
			    			默认情况下，在pc端，一个css像素=一个物理像素
			    			
			视口（viewport）
			  -视口就是屏幕中用来显示网页的区域
			  -可以通过查看视口的大小，来观察css像素和物理像素的比值
			  -默认情况下：
			       视口宽度：
			       960px（css像素）
			       1920px（物理像素）
			       		-此时，css像素和物理像素的比是1:2
			       
			    	
			    
		-->
		
	</body>
</html>
